<template>
	<view class="zh-u-upload">
		<view v-if="props.title">
			<text class="title">{{ props.title }}</text>
		</view>
		<view class="content">
			<view class="display-flex flex-wrap">
				<template  v-if="props.urls && props.urls.length > 0">
					<view class="file-add-box" v-for="(item, index) in props.urls" :key="index" @click="clickItem(index)">
						<view class="delete-box" @click.stop="handleDel(index)">
							<image src="@/static/icons/reject.png" class="delete-img"/>
						</view>
						<view class="file-add-inner-box">
							<image :src="item" class="preview-img" mode="widthFix"/>
						</view>
					</view>
				</template>
				<view class="file-add-box" v-if="props.max > props.urls.length">
					<u-upload-file :count="count" @click="upload">
						<view class="file-add-inner-box">
							<text class="font-40 display-block font-1769ff font-bold text-add">+</text>
							<text class="font-28 font-1769ff">{{ props.text }}</text>
						</view>
					</u-upload-file>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const count = ref(1)
	const props = withDefaults(defineProps<{
		title?:string
		max?:number
		text:string
		urls?: string[]
	}>(), {
		text:'上传',
		max:9,
	})
	//count.value = props.max - props.urls.length
	const emit = defineEmits(['click', 'delOne', 'clickItem'])
	const upload = (data: any) => {
		emit('click', data)
	}
	const handleDel = (index:number) => {
		emit('delOne', index)
	}
	
	const clickItem = (index:number) => {
		emit('clickItem', index)
	}
</script>

<style lang="scss" scoped>
	.zh-u-upload {
		padding: 40rpx 0;
		.title {
			width: 160rpx;
			font-weight:bold;
			font-size:$uni-font-size-base;
			color:$uni-text-color-light-black;
			display:inline-block;
		}
		.content {
			margin-top:30rpx;
			.file-add-box {
				width: 160rpx;
				height: 160rpx;
				background-color:#f6f6f6;
				border-radius:10rpx;
				padding:20rpx;
				//overflow: hidden;
				margin:0 20rpx 20rpx 0;
				cursor: pointer;
				position:relative;
				.delete-box {
					position:absolute;
					right:-16rpx;
					top:-16rpx;
					.delete-img {
						width: 32rpx;
						height: 32rpx;
					}
				}
				.file-add-inner-box {
					width:160rpx;
					height: 160rpx;
					text-align: center;
					border-radius:10rpx;
					background-color: #fff;
					overflow: hidden;
					.text-add {
						padding-top:35rpx;
					}
					
				}
				.preview-img {
					width: 100%;
					//height: 100%;
				}
			}
		}
	}
</style>